|
This page last changed on Sep 23, 2011 by kristin.bradley@involver.com.
Default CSS Styles
These styles are applied to all SML tabs and are designed to be easy to override. They provide very basic layout used by default SML templates and also set a few Facebook-like defaults for fonts.
Fonts / Text
Font styles are similar to Facebook defaults:
body, input, textarea, select
{font-family: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
font-size: 11px;}
body, legend {color: #333;}
Default header font sizes have been set in order to render at the same size in IE as well as other browsers:
h1 {font-size: 18px;}
h2 {font-size: 16px;}
h3 {font-size: 14px;}
h4 {font-size: 12px;}
h5 {font-size: 10px;}
Link styles:
a
{color: #3B5998;
cursor: pointer;
text-decoration: none;}
a:hover {text-decoration: underline;}
Default HTML Structures
Pagination
HTML Rendered by Pagination Tag:
<div class="paginate-links">
<span class="paginate-previous disabled">« Previous</span>
<span class="paginate-number paginate-current">1</span>
<span class="paginate-number"><a href="">2</a></span>
<span class="paginate-gap">...</span>
<span class="paginate-number"><a href="">11</a></span>
<span class="paginate-number"><a href="">12</a></span>
<span class="paginate-next"><a href="">Next »</a></span>
</div>
There is default spacing between each span set by CSS. You can easily customize this if you wish by adding your own CSS. You can also customize the alignment of page numbers and the visual appearance.
Custom CSS Examples:
Make space between numbers a bit wider:
.paginate-links span {margin-left: 10px;}
Align page numbers in center:
.paginate-links {text-align: center;}
Align previous and next links to right and left with page numbers in the middle:
.paginate-links {text-align: center;}
.paginate-previous, .paginate-next
{position: absolute;
top: 0;}
.paginate-previous {left: 0;}
.paginate-next {right: 0;}
|
